<template>
  <div class="gooddesc_div">
    <!-- 账号详情页 -->
    <!-- 头部组件 -->
    <my-header :left="true" title="商品详情">
      <!-- 插入 右侧icon -->
      <template class="right_icon" #right_icon>
        <van-popover  v-model="showPopover" theme="dark" trigger="click" placement="bottom-end" >
          <!-- 第一行 首页 -->
          <van-row @click="showPopover=false;$router.push('/home');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-shouye"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">首页</span>
            </van-col>
          </van-row>
          <!-- 第二行 消息-->
           <van-row  @click="showPopover=false;$router.push('/message');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-youjian"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">消息</span>
            </van-col>
          </van-row>
           <!-- 第三行 我的收藏-->
           <van-row  @click="showPopover=false;$router.push('/collection');">
            <!-- 图标部分 -->
            <van-col sapn="4" offset="4">
              <span class="iconfont icon-shoucang1"></span>
            </van-col>
            <!-- 文字部分 -->
            <van-col sapn="15" offset="1">
              <span class="icon_font">收藏</span>
            </van-col>
          </van-row>
          <template #reference>
            <span class="iconfont icon-gengduo"></span>
          </template>
        </van-popover>
      </template>
    </my-header>
    <div v-if="isRander">
      <!-- 第一块卡片区  -->
      <div class="card1">
        <!-- 第一行 -->
        <van-row class="row1">
          <van-col span="12" class="fenqu">
            <span>正式分区 - 全服大区</span>
            <span class="icon">
              <img :src="getImgPath + 'img/icon/anzhuo.svg'" v-if="gameinfo.gameinfo.OperSys == 'Android'">
              <img :src="getImgPath + 'img/icon/ios.svg'" v-else>
            </span>
          </van-col>
          <van-col span="12" class="gane_status">{{gameState(gameinfo.gameinfo.State)}}</van-col>
        </van-row>
        <!-- 第二行 -->
        <van-row class="row2">
          <!-- 第一行 分两列 账号等级 收藏人数 -->
          <van-row>
            <van-col span="12" class="game_dengji">{{gameinfo.gameinfo.Grade}}级</van-col>
            <van-col span="12" class="game_shoucang">{{gameinfo.gameinfo.coupon}}人收藏</van-col>
          </van-row>
          <!-- 第二行 价格 -->
          <van-row>
            <van-col sapn="24" class="price">
              ¥{{gameinfo.gameinfo.Price}}
            </van-col>
          </van-row>
          <!-- 第三行 时装统计 -->
          <van-row>
            <!-- 显示时装数量 -->
            <van-col span="24" class="skin_count">
              <span>稀释时装 {{getJInCount}}</span>
              <span>奇珍时装 {{getZiCount}}</span>
              <span>角色数 {{getRoleCount}}</span>
            </van-col>
          </van-row>
          <!-- 第四行Tag标签 -->
          <van-row>
            <van-col span="24">
              <a href="javascript:" class="user_tag" v-if="(getJInCount - 0) > 10">金装收藏家</a>
              <a href="javascript:" class="user_tag" v-if="(getZiCount - 0) > 20">紫装收藏家</a>
            </van-col>
          </van-row>
        </van-row>
        <!-- 第三行 -->
        <van-row class="row3">
        <van-col span="24" class="maijia">卖家：RabbitHouse</van-col>
        </van-row>
      </div>
      <!-- 第二块卡片区 -->
      <div class="card2">
        <van-tabs v-model="active" animated title-inactive-color="#1e1e1e" swipeable >
          <van-tab title='时装' class="p10">
            <!-- 卡片标题 -->
            <card-title class="card_title" title="稀世时装"></card-title>
            <!-- 时装展示部分 -->
            <show-skin :skin_data="gameinfo.userjin"></show-skin>
            <!-- 卡片标题 -->
            <card-title class="card_title" title="奇珍时装"></card-title>
            <!-- 时装展示部分 -->
            <show-skin :skin_data="gameinfo.userzi"></show-skin>
          </van-tab>
          <van-tab title='角色' class="p10">
            <!-- 卡片标题  求生者-->
            <card-title class="card_title" title="求生者"></card-title>
            <role-item v-if="role_data_qiou.length != 0" :role_data="role_data_qiou"></role-item>
            <center v-if="!roleIsRander">
              <van-loading size="0.24rem" vertical>加载中...</van-loading>
            </center>
            <center class="notdata" v-if="roleIsRander && role_data_qiou.length == 0">
              暂无数据
            </center>
            <!-- 卡片标题 监管者-->
            <card-title class="card_title" title="监管者"></card-title>
            <role-item v-if="role_data_jian.length != 0" :role_data="role_data_jian"></role-item>
            <center v-if="!roleIsRander">
              <van-loading size="0.24rem" vertical>加载中...</van-loading>
            </center>
             <center class="notdata" v-if="roleIsRander && role_data_jian.length == 0">
              暂无数据
            </center>
          </van-tab>
          <van-tab title='资产' class="zichan p10">
            <card-title class="card_title" title="资产"></card-title>
            <!-- 第一行 -->
            <van-row >
              <van-col span="12">
                <span class="title">碎片：</span>
                <span class="count">{{gameinfo.gameinfo.Fragmemt}}</span>
              </van-col>
              <van-col span="12">
                <span class="title">线索：</span>
                <span class="count">{{gameinfo.gameinfo.Clue}}</span>
              </van-col>
            </van-row>
            <!-- 第二行 -->
            <van-row class="t10">
              <van-col span="12">
                <span class="title">灵感：</span>
                <span class="count">{{gameinfo.gameinfo.Inspiration}}</span>
              </van-col>
              <van-col span="12">
                <span class="title">回声：</span>
                <span class="count">{{gameinfo.gameinfo.Echoes}}</span>
              </van-col>
            </van-row>
            <!-- 第三行 -->
            <van-row class="t10">
              <van-col span="24">
                <span class="title">当前剩余筛子数：</span>
                <span class="count">{{gameinfo.gameinfo.Dice}}</span>
              </van-col>
            </van-row>
          </van-tab>
          <van-tab title='基础信息' class="zichan p10">
            <card-title class="card_title" title="基础信息"></card-title>
            <!-- 第一行 -->
            <van-row >
              <van-col span="12">
                <span class="title">角色昵称：</span>
                <span class="count">{{gameinfo.gameinfo.Role_name}}</span>
              </van-col>
              <van-col span="12">
                <span class="title">阅历等级：</span>
                <span class="count">{{gameinfo.gameinfo.Exper}}</span>
              </van-col>
            </van-row>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 第三块 卡片区域 -->
      <div class="card3"></div>
      <!-- 底部 -->
      <div class="footer">
        <van-row>
          <van-col span="12">
            <!-- 分 两列 收藏 还价 -->
            <van-row class="bott_left">
              <van-col span="12" class="shoucang">
                <div v-if="!isColl" @click="coll">
                  <span class="iconfont icon-shoucang1"></span>
                  <p>收藏</p>
                </div>
                <div v-else @click="uncoll">
                  <span class="iconfont icon-shoucang"></span>
                  <p>已收藏</p>
                </div>
              </van-col>
              <van-col span="12" class="haunjia">
                <span class="iconfont icon-jiagebaohu"></span>
                <p>还价</p>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="12" class="buy_btn" @click="place_order">立即购买</van-col>
        </van-row>
      </div>
    </div>
    <div v-if="!isRander">
      <van-loading class="loading" size="0.24rem" vertical>加载中...</van-loading>
    </div>
  </div>
</template>
<script>
import MyHeader from "../common/Header";
import CardTitle from "./components/CardTitle";
import ShowSkin from "../Home/components/ShowSkin";
import RoleItem from "./components/RoleItem";

import {mapGetters} from "vuex";
export default {
  name:"GoodDesc",
  created() {
    // 获取GID
    let {gid,oper} = this.$route.query;// 获取gid
    this.getGid(gid,oper);
  },
  components:{
    MyHeader,
    CardTitle,
    ShowSkin,
    RoleItem
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    }),
    // 返回账号状态
    gameState(){
      return function (State){
        if(State == 1 || State == "1"){
          return "上架中"
        }else if(State == 2 || State == "2"){
          return "未上架"
        }else{
          return "已售出"
        }
      }
    },
    // 获取金皮数量
    getJInCount(){
      return this.gameinfo.userjin.length;
    },
    // 获取紫皮数量
    getZiCount(){
      return this.gameinfo.userzi.length;
    },
    // 获取角色数量
    getRoleCount(){
      return this.gameinfo.user_Rola_count
    },
  },
  data() {
    return {
      // 当前展示的账号ID
      gid:"",
      oper:"",
      isRander:false,// 阻止页面渲染
      roleIsRander:false,// 阻止角色部分渲染
      gameinfo:{},// 当前账号信息
      showPopover:false,
      active:"",// 选中展示的部分
      // 角色数据
      role_data_jian:[],// 监管者数据
      role_data_qiou:[],// 求生者数据
      isColl:false,// 是否收藏了当前账号
    }
  },
  methods: {
    getGid(gid,oper){
      // console.log(gid);
      if(!gid || !oper){
        this.$message({position:"center",message:"参数有误"});
        this.$router.go(-1);// 如果GID为空
        return;
      }
      if(oper != "Android" && oper != "IOS"){
        this.$message({position:"center",message:"操作系统有误"});
        this.$router.go(-1);// 如果GID为空
        return;
      }
      this.gid = gid;
      this.oper = oper;
      this.getGoodsDesc();
      this.gidIsColl();
    },
    // 获取商品详情信息 根据GID
    async getGoodsDesc(){
      this.isRander = false;
      const {data:res} = await this.$http.get("/getGoodDescByGid",{params:{gameid:this.gid,OperSys:this.oper}});
      // console.log(res.data);
      if(!res.isok){//数据请求失败
        // 返回上一个页面 提示错误
        this.$router.go(-1);
        this.$message({position:"center",message:req.message});
      }
      this.isRander = true;
      this.gameinfo = res.data;
      
    },
    // 请求角色数据
    async getRoleData(){
      this.roleIsRander = false;
      const {data:res} = await this.$http.get("/getRoleData",{params:{gameid:this.gid}});
      this.roleIsRander = true;
      if(!res.isok) return this.$message(res.message);
      // 角色数据请求成功
      this.role_data_jian = res.data.user_role_jian;
      this.role_data_qiou = res.data.user_role_qiou;
      console.log(res.data);
    },
    // 下单
    place_order(){
      this.$router.push({
        path:"conorder",
        query:{
          gameid:this.gid,
          OperSys:this.oper
        }
      })
    },
    // check 是否收藏
    async gidIsColl(){
      const {data:res} = await this.$http.post("isColl",{gid:this.gid});
      console.log(res);
      if(res.isok){
        this.isColl = res.data;
      }else{
        this.isColl = false;
      }
    },
    // 取消收藏
    async uncoll(){
      const {data:res} = await this.$http.post("cancelColl",{deleteuid:this.gid});
      if(res.status == 403){
        this.$router.push("/login");
        return;
      }
      this.$message({position:"center",message:res.message});
      if(!res.isok) return;
      this.isColl = false;
    },
    // 收藏
    async coll(){
      const {data:res} = await this.$http.post("collGid",{gid:this.gid});
       if(res.status == 403){
        this.$router.push("/login");
        return;
      }
      this.$message({position:"center",message:res.message});
      if(!res.isok) return;
      this.isColl = true;
    }
  },
  watch: {
    "$route":function(val){
      if(val.path != "/gooddesc"){
        return;
      }
      let {gid,oper} = val.query;
      this.getGid(gid,oper);
    },
    active:function (val){
      if(val == 1){
        // 判断数组是否为空 为空请求
        if(this.role_data_jian.length != 0 && this.role_data_qiou.length != 0) return;
        this.getRoleData();
      }
    }
  },
}
</script>
<style lang="less" scoped>
  .gooddesc_div{
    padding-top: 0.45rem;
  }
  .van-popover{
    .van-row{
      width: 1rem;
      font-size: 0.15rem;
      height: 0.38rem;
      text-align: center;
      border-top: 0.01rem solid #3F3E48;
      line-height: 0.35rem;
    }
  }
  .card1{
    width: 100%;
    background-color: #FFF;
    margin-top: 0.06rem;
    font-size: 0.12rem;
    padding: 0.1rem;
    box-sizing: border-box;
    .row1{
      border-bottom: 0.01rem solid #F6F6F6;
      padding-bottom: 0.08rem;
      box-sizing: border-box;
    }
    .row2{
      padding: 0.15rem 0rem;
      box-sizing: border-box;
      border-bottom: 0.01rem solid #F6F6F6;
      .van-row{
        margin-bottom: 0.03rem;
      }
      .skin_count{
        span{
          margin-right: 0.05rem;
          color: #888888;
        }
      }
    }
    .row3{
      height: 0.2rem;
      padding-top: 0.1rem;
    }
  }
  .card2{
    width: 100%;
    background-color: #FFF;
    margin-top: 0.06rem;
    padding-bottom: 0.15rem;
    .p10{
      padding: 0rem 0.08rem;
    }
    /deep/ .item_skin{
      height: 1rem;
      .skin_back{
        position:absolute;
        top: 0rem;
      }
      // .skin_name_warp{
      //   bottom: 0.11rem;
      // }
      // .skin_name{
      //     bottom: 0.2rem;
      //   }
    }
  }
  .card3{
    height: 0.48rem;
  }
  .footer{
    box-shadow: 0rem -0.02rem 0.1rem rgba(0, 0, 0, .2);
    height: 0.48rem;
    width: 100%;
    background-color: #FFF;
    position: fixed;
    .van-row{
      height: 100%;
      .van-col{
        height: 100%;
      }
    }
    bottom: 0rem;
    .buy_btn{
      background-color: #E74E4B;
      font-size: 0.16rem;
      font-weight: bold;
      text-align: center;
      line-height: 0.48rem;
      color: #FFF;
    }
  }
  .bott_left{
    font-size: 0.12rem;
    // text-align: center;
    .van-col{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
    }
  }
  .icon-shoucang{
    color: #E74E4B;
    font-weight: bolder;
  }
  .fenqu{
    text-align: left;
    color: #888888;
  }
  .gane_status{
    text-align: right;
    color: #1e1e1e;
  }
  .icon{
    display: inline-block;
    width: 0.15rem;
    height: 0.15rem;
    margin-left: 0.04rem;
    vertical-align: middle;
    img{
      width: 100%;
    }
  }
  .game_dengji{
    text-align: left;
    font-weight: 700;
    font-size: 0.16rem;
    color: #1E1E1E;
  }
  .game_shoucang{
    text-align: right;
    color: #888888;
  }
  .price{
    font-weight: bolder;
    font-size: 0.17rem;
    color: #E74E4B;
  }
  .user_tag{
    color: #EE8381;
    border: 0.01rem solid #EE8381;
    padding: 0.01rem;
    margin-right: 0.05rem;
  }
  .maijia{
    text-align: right;
    color: #888888;
  }
  .van-tabs{
    /deep/ .van-tab--active{
      transition: all .3s;
      background-color: #E74E4B;
      color: #FFF;
    }
    /deep/.van-tabs__line{
      display: none;
    }
  }
  .card_title{
   margin: 0.1rem 0rem;
  }
  .zichan{
    font-size: 0.13rem;
    color: #555555;
  }
  .count{
    color: #1E1E1E;
  }
  .t10{
    margin-top: 0.1rem;
  }
  .shoucang{
    div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
</style>